<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 100px;
				border: #FFA500 solid 1px;
				margin: 5px;
			}

			.d1 {
				background-color: red;
			}

			.d2 {
				background-color: yellow;
			}

			.d3 {
				background-color: blue;
			}

			.d4 {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="d1">div1</div>
		<div class="d2">div2</div>
		<div class="d3">div3</div>
		<div class="d4">div4</div>
		<hr />
		<button class="add">增</button>
		<button class="del">删</button>
		<button class="set">改</button>
		<script type="text/javascript">
			var btn3 = document.querySelector(".set");
			btn3.addEventListener("click", function() {
				//获取第一个div节点对象
				var div1 = document.querySelector(".d1");
				//获取第二个div节点对象
				var div2 = document.querySelector(".d2");
				//获取父节点对象
				var body = div1.parentNode;
				//克隆div2
				var newDiv2 = div2.cloneNode(true);
				//用克隆的div2替换div1
				body.replaceChild(newDiv2, div1);
			})

			var btn2 = document.querySelector(".del");
			btn2.addEventListener("click", function() {
				var div1 = document.querySelector(".d1");
				var body = div1.parentNode;
				// document.body;
				body.removeChild(div1);
			})

			var btn1 = document.querySelector(".add");
			btn1.addEventListener("click", function() {
				var div1 = document.querySelector(".d1");
				// div1.innerHTML = "<a href='https://www.baidu.com'>百度</a>"
				//创建a节点对象
				var a = document.createElement("a");
				a.href = "https://www.baidu.com'>百度</a>";
				a.target = "_blank";
				a.innerText = "百度";
				//往div中追加a节点对象
				div1.appendChild(a);
			})
		</script>
	</body>
</html>
